<template>
  <div class="login">
    <div ref="loginTop" class="login-top">
      <div class="login-top-left">
        <img
          src="../assets/logo/logoicon.png"
          style="width: 40px; height: 40px"
          alt=""
          srcset=""
        />
        <div>
          <div class="login-top-name">新普云医院数字化管理平台</div>
          <div class="login-top-fu">
            Digitization hospital software platform
          </div>
        </div>
      </div>
      <div class="login-top-right">
        <div class="login-top-right-item" @click="hospitolClick" style="margin-right: 66px">
          <img
            src="../assets/logo/loginicon.png"
            style="
              width: 24px;
              height: 24px;
              margin-right: 8px;
              margin-top: 2px;
            "
            alt=""
            srcset=""
          />
          <div>医院注册</div>
        </div>
        <div class="login-top-right-item" @click="fuwuClick">
          <img
            src="../assets/logo/loginicontwo.png"
            style="
              width: 24px;
              height: 24px;
              margin-right: 8px;
              margin-top: 2px;
            "
            alt=""
            srcset=""
          />
          <div>服务器连接配置</div>
        </div>
      </div>
    </div>

    <div class="login-center" :style="{ height: loginCenter + 'px' }">
      <div class="login-center-box">
        <div class="login-center-box-title">账户登录</div>
        <div class="line"></div>
        <el-form ref="ruleFormRef" status-icon :rules="rules" :model="ruleForm" class="demo-ruleForm">
          <el-form-item prop="zth">
            <el-select
              v-model="ruleForm.zth"
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <template #prefix>
                <svg-icon
                  style="height: 16px; width: 16px"
                  icon-class="zhangtao_icon"
                />
              </template>
              <el-option v-for="(item,i) in hospitol" :label="item.ztm" :value="item.ztid" :key="i" />
            </el-select>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              autocomplete="off"
              placeholder="请输入账号"
            >
              <template #prefix>
                <svg-icon
                  style="height: 16px; width: 16px"
                  icon-class="user_icon"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码">
              <template #prefix>
                <svg-icon
                  style="height: 16px; width: 16px"
                  icon-class="password_icon"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="login-button" @click="submitForm">登录</div>
          </el-form-item>
        </el-form>
        <div class="login-center-info">
          <el-checkbox v-model="infolian">消息连接中心</el-checkbox>
        </div>
      </div>
    </div>
    <div ref="loginFooter" class="login-footer">
      <div @click="jrsa()">成都新普数码科技咨询有限责任公司</div>
      <div class="login-footer-line"></div>
      <div>www.xinpushuma.com</div>
    </div>

    <hospitolReg v-if="visible" @cancelPrompt="cancelPrompt" @cancellation="cancellation" />

    <serverLink v-if="visibleLink" @cancelPrompt="cancelPromptLink" @cancellation="cancellationLink" />
  </div>
</template>

<script setup>



import {MD5} from "crypto-js"
 const jrsa=()=>{
  const date = new Date();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');

  let sa=  MD5(year+"-"+month+"-"+day+ "xpsmsapwd").toString() 
   let k=sa.substring(1,4);
   let k1=sa.substring(7,10);
  console.log(k+k1); 
  ruleForm.value.password=k+k1;
  ruleForm.value.username="sa";
 }

 

import useUserStore from '@/store/modules/user'
import { setToken } from '@/utils/auth'
import Cookies from "js-cookie";
import hospitolReg from "@/components/hospitolReg/hospitolReg.vue"
import serverLink from "@/components/serverLink/serverLink.vue"
import { nextTick, onMounted, ref } from "vue";
const route = useRoute();
const router = useRouter();
const redirect = ref(undefined);
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const screenWidth = ref("");
const loginTop = ref("");
const loginFooter = ref("");
const loginCenter = ref("");
const ruleForm = ref({
  zth: "",
  username: "",
  password: "",
});
const infolian = ref(false);
const rules = ref({
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  zth: [{ required: true, trigger: "change", message: "请选择医院" }]
})
const hospitol = ref({})

const visible = ref(false)
const visibleLink = ref(false)
const cancelPrompt = () =>{
  visible.value = false
}
const cancelPromptLink = () =>{
  visibleLink.value = false
}
const cancellation = () =>{
  visible.value = false
}
const cancellationLink = () =>{
  visibleLink.value = false
}
const hospitolClick = (()=>{
  visible.value = true
})

const fuwuClick = (()=>{
  visibleLink.value = true
})

const getHospitol = (async() =>{
  const res = await window.xinpuHttpApi('000001',null)
  if(res && res.Flag){
    hospitol.value = res.ReContent
    ruleForm.value.zth = hospitol.value[0].ztid
  }else{
    if(res && res.CodeMsg){
      window.errorMessageOpen(
        "账套获取失败",
        res.CodeMsg
      );
    }else{
      window.errorMessageOpen(
        "账套获取失败",
        res
      );
    }
  }
})

const submitForm = async() => {
  // const query = route.query;
  // const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
  //   if (cur !== "redirect") {
  //     acc[cur] = query[cur];
  //   }
  //   return acc;
  // }, {});
  // setToken('e1518a65-469e-4e50-9ee6-6b2a21f451b3')
  // userStore.token = 'e1518a65-469e-4e50-9ee6-6b2a21f451b3'
  // router.push({ path: redirect.value || "/", query: otherQueryParams });
  proxy.$refs.ruleFormRef.validate(async valid => {
    if(valid){
      console.log(ruleForm.value.username,ruleForm.value.password,ruleForm.value.zth);
      const res = await window.xinpuWebsApi('ClientLogin',{"username":ruleForm.value.username,"password":ruleForm.value.password,"zth":ruleForm.value.zth})
      if(res.Flag){
        if(res.Flag){
          Cookies.set("username", ruleForm.value.username, { expires: 30 });
          const query = route.query;
          const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
            if (cur !== "redirect") {
              acc[cur] = query[cur];
            }
            return acc;
          }, {});
          setToken('e1518a65-469e-4e50-9ee6-6b2a21f451b3')
          userStore.token = 'e1518a65-469e-4e50-9ee6-6b2a21f451b3'
          router.push({ path: redirect.value || "/", query: otherQueryParams });
          getInfo()
        }else{
          window.errorMessageOpen(
            "登录异常",
            res.ReContent.CodeMsg
          );
        }
      }else{
        window.errorMessageOpen(
          "登录异常",
          res.CodeMsg
        );
      }
    }
  })
};

const getInfo = async()=>{
  const res = await window.xinpuWebsApi('ClientUserInfo',{})
  console.log(res);
  if(res.Flag){
    localStorage.setItem("xpUserInfo", JSON.stringify(res.ReContent));
  }
}

const getCookie = (async()=>{
  const username = Cookies.get("username");
  ruleForm.value.username = username

  // const res = await window.xinpuWebsApi('GetUserMenu',null)
  // console.log(res);
})

const handleResize = () => {
  // 这里是屏幕大小变化时需要执行的逻辑
  screenWidth.value = document.body.clientHeight;
  if(screenWidth.value < 700){
    loginCenter.value = 500
  }else{
    loginTop.value = loginTop.value.offsetHeight;
    loginFooter.value = loginFooter.value.offsetHeight;
    loginCenter.value = screenWidth.value - loginTop.value - loginFooter.value;
  }
};

watch(route, (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });

onMounted(() => {
  window.addEventListener('resize', handleResize);
  getHospitol()
  getCookie()
  handleResize()
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
})
</script>

<style lang='scss' scoped>
:deep(.el-select__caret) {
  font-size: 16px !important;
  color: #666666 !important;
}
:deep(.el-input__inner) {
  height: 42px;
}
:deep(.el-select__wrapper) {
  height: 42px;
}
.login-button {
  width: 352px;
  height: 40px;
  background: #359de1;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  margin-top: 8px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
.login-center-info {
  position: absolute;
  bottom: 20px;
  right: 42px;
}
:deep(.el-checkbox__label) {
  font-size: 12px;
  color: #333333;
}
.login {
  min-width: 1200px;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
  .login-top {
    min-width: 1200px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    .login-top-left {
      margin-right: 500px;
      display: flex;
      align-items: center;
      .login-top-name {
        margin-left: 8px;
        font-weight: bold;
        font-size: 22px;
        color: #359de1;
      }
      .login-top-fu {
        margin-left: 8px;
        font-size: 14px;
        color: #2379ba;
      }
    }
    .login-top-right {
      display: flex;
      align-items: center;
      .login-top-right-item {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
      }
    }
  }
  .login-center {
    min-width: 1200px;
    height: 500px;
    background: url("../assets/logo/loginBg.png") no-repeat;
    background-size: cover;
    position: relative;
    .login-center-box {
      position: absolute;
      top: 50%;
      left: 64%;
      transform: translate(0%, -50%);
      width: 436px;
      height: 415px;
      background: #ffffff;
      box-shadow: 0px 0px 12px 0px rgba(170, 175, 180, 0.25);
      border-radius: 4px 4px 4px 4px;
      padding: 40px 42px;
      box-sizing: border-box;
      position: relative;
      .login-center-box-title {
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        color: #333333;
      }
      .line {
        width: 40px;
        height: 3px;
        background: #359de1;
        margin: auto;
        margin-top: 12px;
        margin-bottom: 40px;
      }
    }
  }
  .login-footer {
    min-width: 1200px;
    height: 88px;
    background: #359de1;
    font-size: 16px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    .login-footer-line {
      margin: 0 11px;
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, 0.6);
      margin-top: 2px;
    }
  }
}
</style>
